<template>
    <div >
        <div v-if="data.video.using && data.video.src != ''" >
            <div v-if="data.video.duration >= 5 && data.video.duration <= 15" class="ad-wraper">
                <div class="ad-video-head">
                    <img src="~assets/img/fb-video-icon.png" alt="img">
                    <span>用户分享到 Facebook 的视频将播放视频插播广告。</span>
                </div>
                <div class="ad-video-con">
                    <video :src="data.video.src" id="previewVideo"></video>
                    <span v-show="!play" @click="playVideo" class="iconfont icon-play"></span>
                    <span v-show="play" @click="pauseVideo" :class="[{show: play},'icon-pause','iconfont']"></span>
                </div>
            </div>
            <div v-else>
                <div class="ad-not-support">
                    <div class="ad-not-wraper">
                        <img src="~assets/img/no-media-icon.png" width="90px" alt="img">
                        <div class="ad-not-title">此视频无法用于插播广告。</div>
                        <ul class="ad-not-list">
                            <li>视频需要有声音</li>
                            <li>视频时长需要5到15秒之间</li>
                            <li>360 视频不支持</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="data.video.using && !data.video.src">
            <dont-choose-media/>
        </div>
        <div v-else >
            <dont-support-message :type="type"/>
        </div>
    </div>

</template>

<script>
    import Vue from 'vue'
    import DontSupportMessage from '~components/ad-preview/dont-support-message.vue'
    import DontChooseMedia from '~components/ad-preview/dont-choose-media.vue'

    export default {
        components: {
            DontSupportMessage,
            DontChooseMedia,
        },
        props: {
            'data': {
                default: {}
            }
        },
        data (){
            return {
                type:'Facebook 视频插播广告位（桌面版）',
                play: false,
                supportFlag: false
            }
        },
        methods: {
            playVideo(){
                let _this = this;
                let video = document.getElementById('previewVideo');
                video.play();
                this.play = true;
                video.addEventListener('ended',function () {
                    _this.play = false
                })
            },
            pauseVideo(){
                document.getElementById('previewVideo').pause();
                this.play = false
            },
        },
    }
</script>

<style lang="scss" scoped>
    .ad-wraper{
        display: block;
        width: 540px;
        min-height: 100px;
        margin: 0 auto 10px;
        padding: 8px;
        border-spacing: 0;
        position: relative;
        text-align: center;
    }
    .ad-video-head{
        margin-bottom: 5px;
        text-align: left;
        line-height: 50px;
        img{
            margin-right: 5px;
            vertical-align: middle;
        }
    }
    .ad-video-con{
        overflow: hidden;
        position: relative;
        z-index: 0;
        margin: auto;
        max-height: 100%;
        max-width: 100%;
        height: 281px;
        width: 500px;
        video{
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            transition: 350ms filter ease-in-out, 350ms -webkit-filter ease-in-out;
        }
        .icon-pause,.icon-play{
            position:absolute;
            font-size: 50px;
            top:50%;
            left: 50%;
            margin: -25px 0 0 -25px;
            color:#fff;
            cursor: pointer;
        }
        .hidden{
            display: none;
        }
        .icon-pause{
            display: none;
        }
        &:hover .icon-pause.show{
             display: inline-block;
         }
    }
    .ad-not-support{
        border-spacing: 0;
        min-height: 100px;
        position: relative;
        text-align: center;
    }
    .ad-not-wraper{
        display: inline-block;
        height: 200px;
        width: 320px;
        padding: 8px;
    }
    .ad-not-title{
        color: #90949c;
        font-size: 15px;
        margin-bottom: 12px;
        margin-top: 12px;
        text-align: left;
        line-height: 16px;
    }
    .ad-not-list{
        margin: 0;
        padding: 0;
        color: #90949c;
        font-size: 15px;
        margin-top: 7px;
        text-align: left;
        list-style-type: square;
        margin-left: 12px;
        li{
            padding: 5px 0 0;
            list-style-type: square;
            color: #90949c;
            line-height: 16px;
        }
    }
</style>